<%--
  Created by IntelliJ IDEA.
  User: This
  Date: 2019/7/9
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>登录页面</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <%@ include file="base/header.jsp" %>
</head>
<button id="getUsername" type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" lay-submit
        lay-filter="ups" style="display: none;margin: 0;">获取用户名
</button>
<body id="login">
<div class="container">
    <form id="loginForm" class="layui-form form-signin">
        <h2 class="form-signin-heading">登录</h2>
        <input type="text" autocomplete="off" class="layui-input" name="username" required lay-verify="required"
               placeholder="用户名"/>
        <input type="password" autocomplete="off" class="layui-input" name="password" required lay-verify="required"
               placeholder="密码"/>
        <button type="button" id="loginSub" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" lay-submit
                lay-filter="formSubmit">登录
        </button>
    </form>
</div>

</body>
<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formSubmit)', function (data) {
            // layui提交表单方式
            // form.submit();
            // 获取字段
            // JSON.stringify(data.field);
            //jq提交
            // $('#loginForm').submit();
            $.ajax({
                url: "${rootPath}/user_login",
                dataType: "json",
                type: "post",
                data: data.field,
                success: function (d) {
                    if (d.status) {
                        layer.msg("登录成功！");
                        location.href = "http://" + window.location.host + d.msg;
                    } else {
                        layer.msg(d.msg);
                    }
                }
            });
        });
    });

    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $("#loginSub").trigger('click');
        }
    });

    $(function () {
        // 用户存在标识
        var flags = false;
        $.ajax({
            url: "${rootPath}/user_hasUser",
            type: 'post',
            dataType: 'json',
            success: function (data) {
                flags = data.flag;
                getFlag(flags);
            }
        });

        //插入导航
        $.ajax({
            url: '${rootPath}/menu_hasMenu',
            dataType: "json",
            type: "post"
        });
        /**
         * 判断是否存在已注册用户
         * @param flag 判断标识
         */
        function getFlag(flag) {
            if (!flag) {
                $("#getUsername").show();
                $("#getUsername").click(function () {
                    layer.prompt({title: '潘钟强帅不帅？', formType: 3}, function (pass, index) {
                        if (pass != "帅") {
                            layer.close(index);
                            layer.msg("输入错误，无法获取用户名及密码");
                            return;
                        }
                        layer.close(index);
                        layer.open({
                            id: 1,
                            type: 1,
                            title: '注册用户',
                            skin: 'layui-layer-rim',
                            area: ['450px', 'auto'],
                            content: ' <div class="row" style="width: 420px;  margin-left:7px; margin-top:10px;">'
                                + '<div class="col-sm-12">'
                                + '<div class="input-group">'
                                + '<span class="input-group-addon"> 用 户 名   :</span>'
                                + '<input name="user" type="text" class="form-control" placeholder="请输入用户名" required>'
                                + '</div>'
                                + '</div>'
                                + '<div class="col-sm-12" style="margin-top: 10px">'
                                + '<div class="input-group">'
                                + '<span class="input-group-addon">密 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</span>'
                                + '<input name="pwd" type="password" class="form-control" placeholder="请输入密码" required>'
                                + '</div>'
                                + '</div>'
                                + '</div>'
                            ,
                            btn: ['保存', '取消'],
                            btn1: function (index, layero) {
                                var user = $("input[name=user]").val();
                                var pwd = $("input[name=pwd]").val();
                                if (user != "admin" && valUserName(user) && pwd.length > 1) {
                                    $.ajax({
                                        url: "${rootPath}/user_register",
                                        dataType: "json",
                                        type: "post",
                                        data: {username: user, password: pwd},
                                        success: function (data) {
                                            layer.close(index);
                                            layer.msg(data.msg);
                                            $("#getUsername").hide();
                                        }
                                    });

                                } else {
                                    layer.msg("用户名必须以字母开头，至少四位！");
                                    layer.close(index);
                                }

                            },
                            btn2: function (index, layero) {
                                layer.close(index);
                            }
                        });
                    });
                });
            } else {
                $("#getUsername").hide();
            }
        }

        //用户名验证
        function valUserName(username) {
            var p = /^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;//用户名必须为4-16为字母或数字
            return p.test(username);
        }
    });

</script>
</html>
